{% extends 'base.html' %}

{% block scripts %}
  <script>
    const known_towers = {{known_towers|tojson}};
    const enodebs = {{enodebs|safe}};
    const key = "{{ key }}";
  </script>
  <script>
  $(document).ready(function(){
    let tdata = ""
    for(const enb of enodebs){
      tdata += `
      <tr id="${enb.cid}">
        <th scope="row"><a href="/cid_detail/${enb.cid}">${enb.cid}</a></th>
        <td>${enb.plmn}</td>
        <td>${enb.closest_tower}</td>
        <td>${enb.sightings}</td>
        <td>${enb.max_suspiciousness}%</td>
        <td>${enb.first_seen}</td>
        <td>${enb.last_seen}</td>
      </tr>
      `
    }
    $('tbody#enb-table').html(tdata);
    $('tr').click( function(){
      var id = this.id;
      console.log(id);
      console.log(markers[id]);
      $("#map").get(0).scrollIntoView();
      google.maps.event.trigger(markers[id], 'click')
    });

  });
  </script>
{% endblock %}

{% block container %}
  <div id="map" class="jumbotron"></div>
  {% include "basemap.html" %}
  <div class='bs-component table-responsive'>
    <table class="table table-hover table-striped data-table">
      <thead class="thead-light ">
        <tr>
          <th>Cell Id</th>
          <th>PLMN</th>
          <th>Closest Tower (m)</th>
          <th>Sightings</th>
          <th>Suspicious %</th>
          <th>First Seen</th>
          <th>Last Seen</th>
        </tr>
        <tbody id='enb-table'>
        </tbody>
    </ul>
  </div>
{% endblock %}
